<template>
    <div class="pageSty">
        <!-- <div class="headSty flex_str">
            <div class="headItemSty">需求:</div>
            <div class="headItemSty" v-for="(item, _index) in needList" :key="item.id" @click="selectNeed(item.id)"
                :class="item.id == params.requireType ? 'addSty' : ''">
                {{ item.name }}</div>
        </div> -->
        <div class="headSty flex_str">
            <div class="headItemSty">状态:</div>
            <div class="headItemSty" v-for="(item, _index) in statusList" :key="item.id" @click="selectStatus(item.id)"
                :class="item.id == params.status ? 'addSty' : ''">
                {{ item.name }}</div>
        </div>
        <div class="headSty flex_str">
            <div class="headItemSty">排序:</div>
            <div class="headItemSty" v-for="(item, index) in sortList" :key="index" @click="sortFUn(item.id)"
                :class="item.id == params.orderBy ? 'addSty' : ''">{{
                    item.name
                }}</div>
        </div>
        <div class="lineSty"></div>
        <div class="list flex_str_wrap">
            <div class="listItem" v-for="(item, index) in releaseList" :key="index" @click="goDetail(item.id)">
                <img :src="item.coverImageUrl" class="imgSty">
                <div class="itemNameSty">{{ item.requireTitle }}</div>
                <div class="flex_btn textSty">
                    <div>预算: <span class="priceSty">{{ item.generalBudget }}元</span></div>
                    <div>制图数: <span>1</span></div>
                </div>
            </div>
        </div>

        <div class="footerSty flex_cen">
            <el-config-provider :locale="locale">
                <el-pagination v-model:current-page="params.current" v-model:page-size="params.size"
                :page-sizes="[12, 24, 36, 48]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getAllRelease"
                @current-change="getAllRelease" />
            </el-config-provider>
           
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { getReleaseListApi } from '@/api/index/index'

// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = zhCn
const router = useRouter()
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const params = reactive({
    status: 0,
    requireTitle: '',
    orderBy: 1,
    current: 1,
    size: 12,
})
const needList = ref([
    {
        id: 0,
        name: '全部'
    }, {
        id: 1,
        name: '当地量房'
    }, {
        id: 2,
        name: '平面方案设计'
    }, {
        id: 3,
        name: '谈单草图'
    }, {
        id: 4,
        name: '三维效果图'
    }, {
        id: 5,
        name: '3D建模'
    }, {
        id: 6,
        name: '深化施工图'
    }
])
const statusList = ref([
    {
        id: 0,
        name: '全部'
    }, {
        id: 1,
        name: '进行中'
    }, {
        id: 2,
        name: '紧急'
    }, {
        id: 3,
        name: '即将结束'
    }, {
        id: 4,
        name: '已结束'
    }
])
const sortList = ref([   
    {
        id: 1,
        name: '时间由近到远'
    }, {
        id: 0,
        name: '预算由高到低'
    }
])
const releaseList = ref<any>([])
const total = ref(0)
const sortFUn = (id: number) => {
    params.orderBy = id
    getAllRelease()
}
// const selectNeed = (id: number) => {
//     params.requireType = id
//     getAllRelease()
// }
const selectStatus = (id: number) => {
    params.status = id
    getAllRelease()
}
const goDetail = (id: number) => {
    router.push({ name: 'moneyDetail', path: '/money/detail', query: { id: id } })
}
const getAllRelease = () => {
    getReleaseListApi(params).then((res: any) => {
        releaseList.value = res.data.records
        total.value = res.data.total
    })
}
onMounted(() => {
    getAllRelease()
})
</script>
<style scoped>
:deep(.is-active) {
    background-color: #FF9D07 !important;
}

.footerSty {
    margin-top: 60px;
}

.priceSty {
    color: red;
}

.itemNameSty {
    margin: 10px;
}

.textSty {
    width: 100%;
    padding: 10px;
}

.list {
    width: 100%;
}

.listItem {
    font-size: 20px;
    width: 22%;
    border: 1px solid #ccc;
    margin: 1.5%;
}

.imgSty {
    width: 100%;
    height: 200px;
}

.lineSty {
    border-top: 1px solid #f0f0f0;
    margin: 40px 0;
}

.pageSty {
    width: 86%;
    margin-left: 7%;
    margin-top: 40px;
    min-height: 500px;
    background-color: #fff;
    padding: 20px 40px;
}

.headSty {
    margin: 12px 0;
    font-size: 20px;
}

.headItemSty {
    margin: 0 12px;
    padding: 4px 10px;
}

.addSty {
    color: #FF9D07;
    border-radius: 18px;
    border: 1px solid #FF9D07;
}
</style>